<template>
    <div class="item-attribute">
        <div class="panel">
            <div class="title">
                文本
            </div>
            <div class="base-form-item">
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label base-form-item-label-required">
                        <span>标题</span>
                    </label>
                </div>
                <div class="base-form-item-control-wrapper">
                    <input placeholder="" v-model="config.title" type="text" class="eic-input" value="项目">
                </div>
            </div>
            <div class="base-form-item">
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label">
                        <span>默认提示</span>
                    </label>
                </div>
                <div class="base-form-item-control-wrapper">
                    <input placeholder="" type="text" v-model="config.placeholder" class="eic-input" value="项目">
                </div>
            </div>
            <!-- 选项 -->
            <div class="base-form-item" v-if="config.options">
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label">
                        <span>选项</span>
                    </label>
                </div>
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label">
                        <input type="radio" value="手动添加" v-model="config.options.dataSource">
                        <span>手动添加</span>
                    </label>
                    <label class="base-form-item-label">
                        <input type="radio" value="使用外部选项" v-model="config.options.dataSource">
                        <span>使用外部选项</span>
                    </label>
                </div>
                <div class="base-form-item-control-wrapper" v-if="config.options.dataSource === '手动添加'">
                    <div class="form-options-v2-option-box" draggable="true"
                        v-for="(item, index) in config.options.fixedValues" :key="index">
                        <span class="universe-icon" draggable="true"
                            style="font-size: 16px; margin-right: 4px; color: rgb(143, 149, 158);"><svg width="1em"
                                height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                data-icon="DragOutlined">
                                <path
                                    d="M8.25 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm0 7.25a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm1.75 5.5a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM14.753 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5ZM16.5 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm-1.747 9a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"
                                    fill="currentColor"></path>
                            </svg></span>
                        <div class="form-options-v2-option">
                            <input placeholder="请输入选项值" v-model="config.options.fixedValues[index]" type="text"
                                class="eic-input">
                        </div>
                        <div class="delete-btn">
                            <span
                                @click="config.options.fixedValues = config.options.fixedValues.filter(i => i !== item)"
                                class="universe-icon form-options-v2-option-delete-icon">
                                <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" data-icon="DeleteTrashOutlined">
                                    <path
                                        d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2h5a1 1 0 1 1 0 2h-1v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6H3a1 1 0 0 1 0-2h5ZM6 6v14h12V6H6Zm4 3a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
                                        fill="currentColor"></path>
                                </svg></span>
                        </div>
                    </div>

                    <div class="add-operator"
                        @click="config.options.fixedValues.push('选项' + (config.options.fixedValues.length + 1))">
                        ＋ 添加选项</div>
                </div>
                <div class="base-form-item-control-wrapper" v-if="config.options.dataSource === '使用外部选项'">
                    <div class="base-form-item">
                        <div class="base-form-item-label-parent">
                            <label class="base-form-item-label base-form-item-label-required">
                                <span>请输入 URL</span>
                            </label>
                        </div>
                        <div class="base-form-item-control-wrapper">
                            <div class="ud__input ud__input--size-md">
                                <div class="ud__input-input-wrap">
                                    <input class="eic-input" placeholder="请输入 URL"
                                        v-model="config.options.dataSourceApi.url" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="base-form-item">
                        <div class="base-form-item-label-parent">
                            <label class="base-form-item-label base-form-item-label-required">
                                <span>请输入 Token</span>
                            </label>
                        </div>
                        <div class="base-form-item-control-wrapper">
                            <div class="ud__input ud__input--size-md">
                                <div class="ud__input-input-wrap">
                                    <input class="eic-input" placeholder="请输入 Token"
                                        v-model="config.options.dataSourceApi.token" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="base-form-item">
                        <div class="base-form-item-label-parent">
                            <label class="base-form-item-label">
                                <span>请输入 Key</span>
                            </label>
                        </div>
                        <div class="base-form-item-control-wrapper">
                            <div class="ud__input ud__input--size-md">
                                <div class="ud__input-input-wrap">
                                    <input class="eic-input" placeholder="请输入 Key"
                                        v-model="config.options.dataSourceApi.key" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 设置默认值 -->
            <div class="base-form-item">
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label">
                        <span>设置默认值</span>
                        <input type="checkbox" v-model="config.defaultValue.enable" value="">
                    </label>
                </div>
                <div class="base-form-item-control-wrapper" v-if="config.defaultValue.enable">
                    <input placeholder="" type="text" v-model="config.defaultValue.value" class="eic-input" value="默认值">
                </div>
            </div>


            <div class="base-form-item">
                <div class="base-form-item-label-parent">
                    <label class="base-form-item-label">
                        <span>其他可选</span>
                    </label>
                </div>
                <div class="base-form-item-control-wrapper">
                    <label class="base-form-item-label">
                        <span>必填</span>
                        <input type="checkbox" v-model="config.required">
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        config: {
            type: Object,
            default:function(){
                return {
                    defaultValue:{}
                }
            }
        }
    }
}
</script>
<style scoped>
.panel {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
}

.title {
    margin-bottom: 16px;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 18px;
    line-height: 28px;
    color: #1f2329;
    font-weight: 500;
}

.base-form-item {
    position: relative;
    margin-bottom: 24px;
}

.base-form-item-label-parent {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}


.base-form-item-label {
    display: block;
    color: #1f2329;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 22px;
    margin-right: 16px;
}


.base-form-item-label.base-form-item-label-required>span {
    position: relative;
}

.base-form-item-label.base-form-item-label-required>span:after {
    content: "*";
    position: absolute;
    left: 100%;
    top: 1px;
    line-height: 20px;
    padding-left: 2px;
    color: #f54a45;
}

*,
:after,
:before {
    box-sizing: border-box;
}


[role=button],
a,
area,
button,
input:not([type=range]),
label,
select,
summary,
textarea {
    touch-action: manipulation;
    
}

input[type=number],
input[type=password],
input[type=text],
textarea {
    -webkit-appearance: none;
}

.eic-input {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: #1f2329;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.eic-input:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(51, 112, 255, .2);
}

.eic-input:focus,
.eic-input:hover {
    border-color: #5c92ff;
    border-right-width: 1px !important;
}

.add-operator {
    display: inline-block;
    line-height: 24px;
    color: #3370ff;
    cursor: pointer;
    user-select: none;
    /* padding: 2px 4px; */
    border-radius: 6px;
    /* margin-left: 5px; */
    padding: 2px 4px;
    margin-top: 6px;
    font-size: 14px;

}

.add-operator:hover {
    background-color: rgba(51, 112, 255, .1);
}

.form-options-v2-option-box {
    display: flex;
    justify-content: flex-start;
    flex: auto;
    align-items: center;
    margin-bottom: 8px;
}

.form-options-v2-option-box .form-options-v2-option {
    flex-grow: 1;
}

.form-options-v2-option-box .delete-btn {
    margin-left: 4px;
    font-size: 16px;
    cursor: pointer;
    color: #8f959e;
}
</style>